<!-- 求职用户行为量统计 -->
<template>
  <div class='behaviorStatisticsUsers'>
    <!-- 头部 -->
    <echartsHeader title="招聘效果图" />
    <br />

    <div class="contents">

      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="name" label="" width="150" align="center">
              </el-table-column>
              <el-table-column prop="nearly7DaysAvg" label="近7天" width="180" align="center">
              </el-table-column>
              <el-table-column prop="nearly15DaysAvg" label="近15天" width="180" align="center">
              </el-table-column>
              <el-table-column prop="nearly30DaysAvg" label="近30天" width="180" align="center">
              </el-table-column>
              <el-table-column prop="Line" label="趋势" align="center">
                <template slot-scope="scope">
                  <div :id="`main${scope.$index}`" style="height:60px;"></div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="block">
            <span class="demonstration">日期：</span>
            <el-date-picker v-model="startDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptionsstart" :appendToBody="false" placeholder="选择日期">
            </el-date-picker><span style="margin:0 10px;color:#fff">-</span>
            <el-date-picker v-model="endDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptionsend" :appendToBody="false" placeholder="选择日期">
            </el-date-picker>
            <span style="margin-left:10px" class="buttn">
              <!-- <el-button @click="statedata('exposureNum')">曝光数</el-button>
              <el-button @click="statedata('browseNum')">浏览数</el-button>
              <el-button @click="statedata('deliver')">投递数</el-button>
              <el-button @click="statedata('count')">全部</el-button> -->
              <el-radio-group v-model="radiobutton" @change="statedata(radiobutton)">
                <el-radio-button label="exposureNum">曝光数</el-radio-button>
                <el-radio-button label="browseNum">浏览数</el-radio-button>
                <el-radio-button label="deliver">投递数</el-radio-button>
                <el-radio-button label="count">全部</el-radio-button>
              </el-radio-group>
            </span>

          </div>
        </el-col>
        <!-- <el-col :span="12">
          <div class="grid-content bg-purple">

            <blockContent title="趋势">

              <div id="ec_2"></div>
            </blockContent>
          </div>
        </el-col> -->
      </el-row>
      <br />
      <!-- 图表1 -->
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <!-- id不要重复 -->
            <div id="ec_4"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <!-- id不要重复 -->
            <div id="ec_5"></div>
          </div>
        </el-col>
      </el-row>
      <br />
      <!-- 图表5 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">

            <div id="ec_8"></div>

          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">

            <div id="ec_9"></div>

          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
// 引入封装插件，需求不够跟我说
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
import { tradeStatistics, categoryStatistics, exposure, browse, deliver, companyNature, companyNatureDeliver, companyIndustry, companyIndustryDeliver } from '../../../api/jobHuntingStatistics.js';
import bus from '@/components/common/bus';
console.log(MyEcharts, 'MyEcharts')

export default {
  components: {},
  data () {
    return {
      startDate: '',
      endDate: '',
      radiobutton: 'count',
      pickerOptionsend: { disabledDate: this.disabledDate },
      pickerOptionsstart: { disabledDate: this.disabledstartDate },
      listpie: [],
      tableData: [{
        name: '职位平均曝光次数',
        nearly7DaysAvg: '',
        nearly15DaysAvg: '',
        nearly30DaysAvg: '',
        Line: {
          legend: [],
          xAxis: [],
          series: [
            {
              itemStyle: {
                normal: {
                  color: '#3856ae',
                  lineStyle: {
                    color: '#3856ae'
                  }
                }
              },
              symbol: 'none',  //取消折点圆圈
              smooth: true,  //折线平滑
              name: '数量',
              type: 'line',
              stack: '总量',
              data: []
            }
          ]
        }
      },
      {
        name: '职位平均浏览次数',
        nearly7DaysAvg: '',
        nearly15DaysAvg: '',
        nearly30DaysAvg: '',
        Line: {
          legend: [],
          xAxis: [],
          series: [
            {
              itemStyle: {
                normal: {
                  color: '#3856ae',
                  lineStyle: {
                    color: '#3856ae'
                  }
                }
              },
              symbol: 'none',  //取消折点圆圈
              smooth: true,  //折线平滑
              name: '数量',
              type: 'line',
              stack: '总量',
              data: []
            }
          ]
        }
      },
      {
        name: '职位平均投递次数',
        nearly7DaysAvg: '',
        nearly15DaysAvg: '',
        nearly30DaysAvg: '',
        Line: {
          legend: [],
          xAxis: [],

          series: [
            {
              itemStyle: {
                normal: {
                  color: '#3856ae',
                  lineStyle: {
                    color: '#3856ae'
                  }
                }
              },
              symbol: 'none',  //取消折点圆圈
              smooth: true,  //折线平滑
              name: '数量',
              type: 'line',
              stack: '总量',
              data: []
            }
          ]
        }
      },
      ],





      // 行业
      pieImgindustry: {
        // legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        // xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [


          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      // 职位饼图
      pieImgposition: {
        // legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        // xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      // 行业性质
      pieImgnature: {
        // legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        // xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      // 产业
      pieImgindu: {
        // legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        // xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    init () {
      this.initData('count')
      this.initDatalist()
    },
    // 首次获取数据
    initData (num) {
      var formdata = new FormData();
      formdata.append('startDate', this.startDate);
      formdata.append('endDate', this.endDate);
      if (num === 'deliver') {
        formdata.append('deliver', 1);
      }

      Promise.all([categoryStatistics(formdata), tradeStatistics(formdata), companyNature(formdata), companyIndustry(formdata)]).then(res => {
        console.log(res, 'datadsadada')
        this.list = res
        // this.statedata('count')
        this.pieImgindustry.series[0].data = []
        this.pieImgposition.series[0].data = []
        this.pieImgnature.series[0].data = []
        this.pieImgindu.series[0].data = []

        //职位类别
        this.list[0].data.map(item => {
          this.pieImgindustry.series[0].data.push({
            value: num === 'count' ? item.count : num === 'exposureNum' ? item.exposureNum : num === 'browseNum' ? item.browseNum : item.count,
            name: item.name
          })
        })
        //行业职位
        this.list[1].data.map(item => {
          this.pieImgposition.series[0].data.push({
            value: num === 'count' ? item.count : num === 'exposureNum' ? item.exposureNum : num === 'browseNum' ? item.browseNum : item.count,
            name: item.name
          })
        })
        if (num !== 'deliver') {
          //行业性质
          this.list[2].data.map(item => {
            this.pieImgnature.series[0].data.push({
              value: num === 'count' ? item.naturecount : num === 'exposureNum' ? item.exposurenum : num === 'browseNum' ? item.browsenum : 0,
              name: item.name
            })
          })
          //产业
          this.list[3].data.map(item => {
            this.pieImgindu.series[0].data.push({
              value: num === 'count' ? item.naturecount : num === 'exposureNum' ? item.exposurenum : num === 'browseNum' ? item.browsenum : 0,
              name: item.name
            })
          })
        } else {
          this.initDatadeliver()
        }

        this.optionChart();
      })
    },
    //列表数据
    initDatalist () {
      Promise.all([exposure(), browse(), deliver()]).then(res => {
        console.log(res, 'data')
        // let resDate = Object.keys(res.data)
        res.map((item, i) => {
          this.tableData[i].nearly7DaysAvg = res[i].data.nearly7DaysAvg
          this.tableData[i].nearly15DaysAvg = res[i].data.nearly15DaysAvg
          this.tableData[i].nearly30DaysAvg = res[i].data.nearly30DaysAvg
          this.tableData[i].Line.xAxis = res[i].data.date.reverse()
          this.tableData[i].Line.series[0].data = res[i].data.count.reverse()
        })
        console.log(this.tableData[0].Line.xAxis.data, ' this.tableData[i].Line.xAxis.data')
        this.optionChart()
      })
    },
    initDatadeliver () {
      Promise.all([companyNatureDeliver(), companyIndustryDeliver()]).then(res => {
        console.log(res, 'dataeeeee')
        this.pieImgnature.series[0].data = []
        this.pieImgindu.series[0].data = []

        //行业性质
        res[0].data.map(item => {
          this.pieImgnature.series[0].data.push({
            value: item.delivercount,
            name: item.name
          })
        })
        //产业
        res[1].data.map(item => {
          this.pieImgindu.series[0].data.push({
            value: item.delivercount,
            name: item.name
          })
        })
        console.log(this.pieImgindu.series[0].data, 'this.pieImgindu.series[0].data')
        this.optionChart()
      })
    },
    optionChart () {

      let option_pie4 = MyEcharts.EchartsOption.pie('', '', this.pieImgindustry)
      MyEcharts.initChart(option_pie4, 'ec_4')

      let option_pie5 = MyEcharts.EchartsOption.pie('', '', this.pieImgnature)
      MyEcharts.initChart(option_pie5, 'ec_5')





      let option_pie8 = MyEcharts.EchartsOption.pie('', '', this.pieImgposition)
      MyEcharts.initChart(option_pie8, 'ec_8')


      let option_pie9 = MyEcharts.EchartsOption.pie('', '', this.pieImgindu)
      MyEcharts.initChart(option_pie9, 'ec_9')
      this.getAllChart()
    },
    // 查询加载
    statedata (num) {
      this.initData(num)
      // if (num === 'deliver') {
      //   this.initDatadeliver()
      // }
    },
    // 图表
    optionPi (i, itemData) {
      // 必须传参
      let option_pie = MyEcharts.EchartsOption.LineJob('', '', itemData)
      MyEcharts.initChart(option_pie, 'main' + i)
    },
    getAllChart () {
      for (let i = 0; i < this.tableData.length; i++) {
        setTimeout(() => {
          this.optionPi(i, this.tableData[i].Line)
        }, 500)
      }
    },
    disabledDate (time) {
      if (this.startDate !== '') {
        return time.getTime() < new Date(this.startDate).getTime();
      } else {
        return time.getTime() >= Date.now();
      }
    },
    disabledstartDate (time) {
      if (this.endDate !== '') {
        return time.getTime() > new Date(this.endDate).getTime();
      } else {
        return time.getTime() >= Date.now();
      }
    }
  },
  created () {
    bus.$on('optionPiesSize', msg => {
      this.optionChart()
    });
  },
  mounted () {
    // 为了模拟数据返回等待的时间，同时也是为了更好的初始化实例
    // setTimeout(() => {
    //   this.optionChart()

    // }, 500)
    // this.initData('count')
    // this.initDatalist()
    // this.initDatadeliver()
    this.init()

  },
  beforeCreate () { },
  beforeMount () {
  },
  beforeUpdate () { },
  updated () {

  },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.behaviorStatisticsUsers {
    background: #080850;
}
.behaviorStatisticsUsers /deep/ .el-table th {
    background-color: #080850 !important;
    color: #fff;
}
.behaviorStatisticsUsers /deep/ .el-table td {
    background-color: #080850 !important;
    color: #fff;
    border: none;
}
.behaviorStatisticsUsers /deep/ .el-table .cell {
    overflow: initial;
}
.behaviorStatisticsUsers /deep/ .el-table th.is-leaf {
    border: none;
}
.behaviorStatisticsUsers /deep/ .el-table--border tr,
td {
    border: none !important;
}
.behaviorStatisticsUsers /deep/ .el-date-editor.el-input {
    width: 130px;
}
.behaviorStatisticsUsers /deep/ .el-input--small .el-input__inner {
    background-color: #080850 !important;
}
.el-input--small .el-input__inner .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
}
.contents {
    width: 96%;
    margin: 0 auto;
}
.behaviorStatisticsUsers .el-table th {
    background: #080850;
}

.bg-purple /deep/ .el-table {
    /* border-right: 1px solid #080850 !important; */
    background-color: #080850;
}
.bg-purple .el-table::before {
    background: #080850;
}
.buttn /deep/ .el-radio-button .el-radio-button__inner {
    margin-right: 10px;
    border-radius: 4px 4px 4px 4px;
}
#ec_1 {
    height: 270px;
}

#ec_2 {
    height: 270px;
}

#ec_3 {
    height: 270px;
}

#ec_4 {
    height: 270px;
}

#ec_5 {
    height: 270px;
}

#ec_6 {
    height: 270px;
}

#ec_7 {
    height: 300px;
}

#ec_8 {
    height: 300px;
}
#ec_9 {
    height: 300px;
}
#ec_10 {
    height: 300px;
}
.demonstration {
    color: #fff;
}
</style>